<template>
  <div class="dhcc-body">
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="dhcc-search">
          <el-form ref="searchForm" :inline="true" size="mini">
            <el-form-item prop="name">
              <el-input placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="dhcc-main">
          <el-table height="550" border style="width: 100%" size="mini">
            <el-table-column prop="name" label="商品名称"></el-table-column>
            <el-table-column prop="code" label="商品编码"></el-table-column>
            <el-table-column prop="spec" label="商品规格"></el-table-column>
          </el-table>
          <el-pagination
            :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 10px"
          ></el-pagination>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="dhcc-search">
          <el-form ref="searchForm" :inline="true" size="mini">
            <el-form-item prop="name">
              <el-input placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-input placeholder="商品编码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search">查询</el-button>
              <el-button type="primary" icon="el-icon-edit">新增</el-button>
              <el-button icon="el-icon-refresh">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="dhcc-main">
          <el-table height="550" border style="width: 100%" size="mini">
            <el-table-column
              type="index"
              label="序号"
              width="60"
            ></el-table-column>
            <el-table-column prop="name" label="商品名称"></el-table-column>
            <el-table-column prop="code" label="商品编码"></el-table-column>
            <el-table-column prop="spec" label="商品规格"></el-table-column>
            <el-table-column
              prop="retailPrice"
              label="零售价"
              width="110"
            ></el-table-column>
            <el-table-column
              prop="purchasePrice"
              label="进货价"
            ></el-table-column>
            <el-table-column
              prop="storageNum"
              label="库存数量"
            ></el-table-column>
            <el-table-column
              prop="supplierName"
              label="供应商"
            ></el-table-column>
            <el-table-column label="操作" width="150"> </el-table-column>
          </el-table>
          <el-pagination
            :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 10px"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "demo2",
  data() {
    return {};
  },
  methods: {},
};
</script>